<template>
  <div>
    <ListTab v-if="!showMobilePage" show-header />
    <div :class="{'mobile-table mobile-min-height':showMobilePage}" class="log-manage min-fill-page">
      <FilterInput v-if="!showMobilePage" v-model="filterParams" :filter-list="filterList" show-search-btn class="FilterTool" @handelClick="queryClick" @queryEmpty="queryEmpty" @filterTagStatus="filterTagStatus" />
      <div :style="{marginTop:showMobilePage?0:'16px'}" class="table-list">
        <div v-loading="listLoading" style="min-height: 300px">
          <u-table
            v-if="list.items.length > 0"
            :data="list.items"
            :height="setTableHeight"
            :row-height="49"
            :border="true"
            beautify-table
            header-drag-style
            use-virtual
            class="fb-table"
            element-loading-text="加载中..."
            header-cell-class-name="order-data-header-cell"
            empty-text="暂无数据"
            fit
            hightlight-current-row>
            <u-table-column align="left" label="工号" width="100">
              <template slot-scope="scope">
                {{ scope.row.jobNumber || '--' }}
              </template>
            </u-table-column>
            <u-table-column align="left" label="操作员">
              <template slot-scope="scope">
                {{ scope.row.operator || '--' }}
              </template>
            </u-table-column>
            <u-table-column align="left" label="操作模块">
              <template slot-scope="scope">
                {{ scope.row.modular || '--' }}
              </template>
            </u-table-column>
            <u-table-column align="left" label="操作内容" min-width="180">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.content"/>
              </template>
            </u-table-column>
            <u-table-column align="left" label="操作IP" min-width="140">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.ip" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="操作时间" min-width="140">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.time" />
              </template>
            </u-table-column>
          </u-table>
          <empty-placeholder v-else-if="!isInit" style="margin-bottom: 24px" />
          <el-row v-if="showMobilePage" type="flex" justify="left">
            <el-pagination
              v-show="list.total > 0"
              :current-page="list.page"
              :page-size="list.perPage"
              :total="list.total"
              :small="true"
              :page-sizes="[20, 50, 100, 250, 500]"
              :layout="pageLayout"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
            />
          </el-row>
        </div>
        <fixed-pagination v-if="list.total > 0 && !showMobilePage || showMobilePage">
          <template v-if="showMobilePage">
            <FilterInput
              v-model="filterParams"
              :filter-list="filterList"
              show-search-btn
              show-mobile-icon
              class="FilterTool"
              @handelClick="queryClick"
              @queryEmpty="queryEmpty"
              @filterTagStatus="filterTagStatus" />
          </template>
          <template v-else>
            <span style="flex:1;"/>
            <el-pagination
              v-show="list.total > 0"
              :current-page="list.page"
              :page-size="list.perPage"
              :total="list.total"
              :page-sizes="[20, 50, 100, 250, 500]"
              layout="total, prev, pager, next, sizes, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </template>
        </fixed-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import Title from '@/components/Title';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import ListTab from '@/components/ListTab';
import { operatorLog } from '@/api/auth';
import { hasRouteAuth, ROUTER_TYPES } from '@/utils/permission';
import { paramsRangeFormat } from '@/utils/paramsFormat';
import TableAdaptive from '@/mixins/tableAdaptive';
import mobileTable from '@/mixins/mobileTable';
import { mapState } from 'vuex';

export default {
  components: { Title, EmptyPlaceholder, ListTab },
  mixins: [TableAdaptive, mobileTable],
  data() {
    return {
      list: {
        items: []
      },
      listLoading: false,
      isInit: true,
      perPage: 20,
      page: 1,
      filterParams: {},
      filterList: [
        { keyword: 'jobNumber', name: '工号', type: 'input' },
        { keyword: 'operator', name: '操作员', type: 'input' },
        { keyword: 'modular', name: '操作模块', type: 'input' },
        { keyword: 'content', name: '操作内容', type: 'input' },
        { keyword: 'ip', name: '操作IP', type: 'input' },
        { keyword: 'dateTime', name: '操作时间', type: 'rangeDate', format: 'yyyy/MM/dd HH:mm' }
      ],
      rangeKeyArr: [{
        attr: 'dateTime',
        start: 'startTime',
        end: 'endTime',
        type: ''
      }],
      isUmyTable: true
    };
  },
  computed: {
    ...mapState({
      'showMobilePage': state => state.app.showMobilePage
    }),
    tableOutsideHeight() {
      return this.showMobilePage ? 148 : 188;
    }
  },
  created() {
    this.getLogList(true);
  },
  beforeRouteEnter(to, from, next) {
    if (hasRouteAuth([ROUTER_TYPES.AUTH_LOG])) {
      next();
    } else if (hasRouteAuth([ROUTER_TYPES.AUTH_ROLE])) {
      next('/user/role');
    } else if (hasRouteAuth([ROUTER_TYPES.AUTH_OPERATOR])) {
      next('/user/operator');
    } else {
      next('/');
    }
  },
  methods: {
    async getLogList(reset = false) {
      if (reset) this.page = 1;
      const filterParams = this.filterParams ? JSON.parse(JSON.stringify(this.filterParams)) : {};
      const params = {
        page: this.page,
        perPage: this.perPage,
        ...filterParams
      };
      paramsRangeFormat(this.rangeKeyArr, params);
      this.listLoading = true;
      operatorLog(params).then(({ data }) => {
        this.list = data;
        this.isInit = false;
        this.listLoading = false;
      }, result => {
        this.listLoading = false;
        this.isInit = false;
      }).catch(e => {
        console.error(e);
      });
    },
    queryClick() {
      this.getLogList(true);
    },
    queryEmpty() {
      this.filterParams = {};
      this.getLogList();
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.getLogList(true);
    },
    handleCurrentChange(toPage) {
      this.page = toPage;
      this.getLogList();
    }
  }
};
</script>
<style rel="stylesheet/scss" lang="scss" scoped>
.log-manage {
  margin: 16px 16px 0 16px;
  // border:1px solid #eee;
  // box-shadow:2px 4px 13px 0px rgba(221,225,234,1);
  // border-radius:12px;
  background-color: #fff;
  padding: 20px 20px 55px 20px;
  .table-list {
    border-radius: 10px;
    .el-table {
      font-size: 14px;
    }
    .el-row {
      padding: 0;
    }
  }
  .list-top {
    display: flex;
    align-items: center;
    .list-title {
      flex:1;
    }
  }
  .opeator-content {
     text-overflow: -o-ellipsis-lastline;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 2;
      line-clamp: 2;
      -webkit-box-orient: vertical;
  }

}
.FilterTool {
  &::v-deep {
    .el-date-editor--datetimerange {
      &.el-input__inner {
        width: 310px !important;
      }
      .el-range-input {
        width: 30% !important;
      }
    }
  }
}

</style>

